<template>
	<div id="Content-page">
		<Paging :pagData="[{ name: '订单管理', router: '' }]" />
		<div class="content-main">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="createdAt" label="交易时间" />
				<el-table-column label="订单类型">
					<template #default="{ row }">
						{{ row.orderType ? '外卖' : '自提' }}
					</template>
				</el-table-column>
				<el-table-column label="订单状态">
					<template #default="{ row }">
						{{ getStatus(row.OrderStatus) }}
					</template>
				</el-table-column>
				<el-table-column prop="payPrice" label="交易金额" />
				<el-table-column prop="productOrderCount" label="订单数量">
					<template #default="{ row }">
						{{ row.goods.length }}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template #default="{ row }">
						<el-button type="primary" size="default" @click="orderDetails(row._id)">订单详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-pagination class="pager-next" background layout="prev, pager, next" :total="total" hide-on-single-page
			@current-change="currentChange" />
	</div>
	<!-- 详细订单展示 -->
	<el-drawer v-model="drawerOrder" :title="drawerTitle" size="40%">
		<el-table :data="orderData" style="width: 100%">
			<el-table-column prop="name" label="商品" />
			<el-table-column label="规格">
				<template #default="{ row }">
					{{ row.specs.length > 0 ? row.specs.join('/') : '' }}
				</template>
			</el-table-column>
			<el-table-column prop="quantity" label="数量" />
			<el-table-column prop="price" label="小计" />
		</el-table>
		<div class="particulars">
			<div class="particulars-flex" v-for="(item, index) in orderInfo" :key="index">
				<p class="orderInfotitle">{{ item.way }}</p>
				<div v-if="!Array.isArray(item.details)">{{ item.details }}</div>
				<div v-else v-for="(item_a, index_a) in item.details" :key="index_a">
					<p>{{ item_a.name }}</p>
					<p>{{ item_a.phone }}</p>
					<p>{{ item_a.address }}</p>
					<p>{{ item_a.detail }}</p>
				</div>
			</div>
		</div>
	</el-drawer>
</template>

<script setup>
// 顶部导航组件
import Paging from '@/page/component/Paging-component.vue';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const $router = useRouter();  // 这是路由跳转的
import request from '@/api/request.js';
import { domain } from "@/api/request.js";
const tableData = ref([]);
const page = ref(1);
const total = ref(0);
onMounted(async () => {
	requestApi();
});
async function requestApi() {
	const res = await request.get(`${domain}/api/wx/getOrderList`, { page: page.value, type: 1 });
	console.log(res);
	tableData.value = res.data.list;
	total.value = res.data.total;
}
// 分页
async function currentChange(event) {
	page.value = event;
	requestApi();
}
const getStatus = (status) => {
	const arr = ["待支付", "待备餐", "正在备餐", "配送中", "待取餐", "已完成"];
	return arr[status];
};
// 详细订单
const drawerOrder = ref(false);
const drawerTitle = ref('');
const orderData = ref([]);
const orderInfo = ref([]);
async function orderDetails(_id) {
	const { data } = await request.get(`${domain}/api/wx/getOrderDetail`, { _id });
	console.log(data);
	drawerTitle.value = data.data.orderType ? '外卖' : "自提";
	orderData.value = data.data.goods;
	console.log(orderData.value);
	if (data.data.orderType === 0) {
		orderInfo.value = [
			{
				way: '订单类型',
				details: '自提'
			},
			{
				way: '取餐码',
				details: data.data.takeMealCode
			},
			{
				way: '联系电话',
				details: data.data.phone
			}
		];
	} else {
		orderInfo.value = [
			{
				way: '订单类型',
				details: '外卖'
			},
			{
				way: '收货地址',
				details: data.data.addressInfo
			}
		];
	}
	orderInfo.value.push(
		{
			way: '交易金额',
			details: `¥${data.data.payPrice}`
		},
		{
			way: '下单时间',
			details: data.data.createdAt
		},
		{
			way: '订单号',
			details: data.data.orderNumber
		}
	);
	drawerOrder.value = true;
}
</script>

<style>
.particulars {
	background-color: #f8f8f8;
	margin: 10px 0;
	border-radius: 4px;
}

.particulars-flex {
	display: flex;
	align-items: center;
	padding: 10px;
}

.particulars p {
	font-size: 15px;
}

.orderInfotitle {
	font-weight: bold;
	width: 90px;
}
</style>